<template>
    <div>
        <span style="color: #107ce1;cursor: pointer;" v-if="cqgDataVersion" @click="handleSelect()">{{ cqgDataVersion }}</span>
        <el-button @click="handleSelect()" v-else>选择</el-button>
        <el-dialog :title="title" v-if="open" v-model="open" width="900px" append-to-body>
            <p></p>
            <el-table ref="tableRef" :data="dataList" stripe row-key="versionCode">
                <el-table-column type="expand" width="1">
                    <template #default="props">
                        <div class="expandTable">
                            <h3 style="margin: 5px 0">更多信息</h3>
                            <p>数据名称：{{ props.row.dataName }} </p>
                            <p>版本说明: {{ props.row.versionDesc }}（此处是版本说明，<span style="color:red">限制300字以内</span> ）</p>
                            <p>数据说明: {{ props.row.dataDesc }}（此处是数据说明，<span style="color:red">限制300字以内</span> ）</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单选" width="55px">
                    <template #default="scope">
                        <el-radio :label="scope.row.versionCode" v-model="selectRadio"
                            @click.native.stop.prevent="getCurrentRow(scope.row)">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="版本日期" align="center" prop="versionTime" />
                <el-table-column label="版本号" align="center" width="190" prop="versionCode" />
                <el-table-column label="数据范围" align="center" prop="dataRangeCountry">
                    <template #default="scope">
                        <span v-if="scope.row.dataRangeCountry == 1">国家级</span>
                        <span v-if="scope.row.dataRangeCountry == 2">省级</span>
                    </template>
                </el-table-column>
                <el-table-column label="上传日期" align="center" prop="uploadTime" />
                <el-table-column label="上传人" align="center" prop="userName" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button type="text" @click="handleMore(scope.row)">更多数据</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page"
                v-model:limit="queryParams.rows" @pagination="handleSelect" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="plot" :disabled="!selectRadio">确 定</el-button>
                    <el-button @click="open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
import { listData } from "@/api/system/selectData"
const { proxy } = getCurrentInstance();
const emits = defineEmits(['getCqgDataVersion'])
const props = defineProps({
    modelValue: String,
    title: {
        type: String,
        default: ''
    },
     list:{
      type: [String, Object, Array],
      default:[]
    },
})
const open = ref(false);
const dataList = ref([]);
const total = ref(0);
const selectionData = ref({});
const selectRadio = ref(undefined);
const forbidden = ref(true);
const cqgDataVersion = ref(undefined);
const data = reactive({
    queryParams: {
        rows: 10,
        page: 1,
        dataTypeCode: 1
    }
})

const { queryParams } = toRefs(data);

watch(() => props.modelValue, val => {
  if (val) {
    console.log(val,'改变的值');
    cqgDataVersion.value = val;

  } else {
    cqgDataVersion.value = undefined;
  }
},{ deep: true, immediate: true });

function handleSelect() {
    listData({ ...queryParams.value,list:props.list }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        total.value = response.data.total;
        open.value = true;
        selectionData.value = {};
        selectRadio.value = undefined;
        forbidden.value = true
    })
}

// 更多数据
function handleMore(row) {
    proxy.$refs['tableRef'].toggleRowExpansion(row);
}

function  getCurrentRow (row) {
    if (!forbidden.value) {
      forbidden.value = true
    }
    if (selectRadio.value) {
      if (selectRadio.value == row.versionCode) {
        selectRadio.value = ''
        forbidden.value = false
        setTimeout(() => {
          forbidden.value = true
        }, 0)
        selectionData.value = {};// 取消勾选就把回传数据清除
        return
      } else {
        forbidden.value = false
        setTimeout(() => {
          forbidden.value = true
        }, 0)
      }
    } else {
      forbidden.value = false
      setTimeout(() => {
        forbidden.value = true
      }, 0)
    }
    selectRadio.value = row.versionCode;
    selectionData.value = row;
  }

function plot() {
    open.value = false;
    cqgDataVersion.value = selectionData.value.versionCode;
    emits('getCqgDataVersion', cqgDataVersion.value)
}
</script>

<style lang="scss" scoped>
.expandTable {
    padding: 5px 20px 5px 85px;

    h3 {
        font-weight: bold;
    }

    p {
        margin: 0px;
        line-height: 25px !important;
    }
}

:deep(.el-table__expand-icon) {
    display: none;
}
</style>